<template>
    <div class="main">
        <el-form ref="Admin_Login_Data" :model="Admin_Login_Data" :rules="rules" class="login-form">
            <el-form-item prop="admin_phone">
                <el-input v-model="Admin_Login_Data.admin_phone" type="text" placeholder="手机号"
                    prefix-icon="el-icon-s-check">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="Admin_Login_Data.password" show-password type="password" placeholder="密码"
                    prefix-icon="el-icon-lock">
                </el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                    @click="handleLogin('Admin_Login_Data')">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import CryptoJS from 'crypto-js'
import userzRequest from '../api/userzRequest';
import getStorage from '../utils/getStorage'
import router from '@/router/index'
export default {
    // 组件名称
    name: 'loginPassword',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            loading: false,
            Admin_Login_Data: {
                password: '',
                admin_phone: '',
            },
            //表单的验证
            rules: {
                admin_phone: [
                    { required: true, message: '请输入手机号', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' }
                ],
            },
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        //密码加密
        encrypt(password) {
            let key = CryptoJS.enc.Utf8.parse("1463587320654321"); //为了避免补位，直接用16位的秘钥
            let iv = CryptoJS.enc.Utf8.parse("1758326540123456"); //16位初始向量
            let encrypted = CryptoJS.AES.encrypt(password, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
            });
            return encrypted.toString();
        },
        handleLogin(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let obj = {
                        user_phone: this.Admin_Login_Data.admin_phone,
                        user_password: this.encrypt(this.Admin_Login_Data.password)
                    }
                    let that = this;
                    userzRequest.user_password_login(obj).then(res => {
                        getStorage.insertTokenStorage(res.data.user_password);
                        getStorage.insertAxiosUserIdStorage(res.data.user_id);
                       
                        router.push({
                            path: `/myroles`,
                        });
                    }).catch(function (error) {
                        that.Admin_Login_Data.password = '';
                        that.loading = false;
                        this.$message({
                            message: '服务器出现错误',
                            type: 'error'
                        })
                    })
                    that.loading = false;

                } else {
                    this.$message({
                        message: '请输入',
                        type: 'error'
                    })
                    return false;
                }
            });
        }
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {

    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {

    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped >
.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 18vw;
    padding: 25px 25px 5px 25px;
}

.login-form .el-input {
    height: 38px;
}

.login-form .el-input input {
    height: 38px;
}

.login-form .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-form .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
}
</style>
  